<template>
  <div class="content_top">
    <form class="condition_query">
      <span class="txt">物料名称</span>
      <el-input class="inline-input" size="medium" v-model="name" clearable placeholder="请输入"></el-input>

      <span class="txt">用料周期</span>
      <el-date-picker
        v-model="dateRange"
        size="medium"
        style="width: 270px"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      ></el-date-picker>

      <el-button
        type="primary"
        size="medium"
        icon="el-icon-search"
        style="margin-left:40px"
        @click="searchPlan()"
      >查询</el-button>
    </form>

    <div>
      <el-table
        :data="materialPlanList"
        tooltip-effect="dark"
        :height="tableHeight"
        size="small"
        style="width: 100%;"
        v-loading="loading"
        @selection-change="handleSelectionChange">
        <el-table-column prop="name" label="物料名称">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="onPlanDetails(scope.row.id)"
            >{{scope.row.name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="materialId" label="物料ID"></el-table-column>
        <el-table-column prop="photo" label="车辆信息" width="320">
          <template slot-scope="scope">
            <div style="line-height: 18px;" v-for="item in scope.row.vehicleList" :key="item.id">{{ item.numberPlate }} &nbsp;{{ item.vehicleInfo }} &nbsp;{{ item.name }}</div>
          </template>
        </el-table-column>
        <el-table-column label="用料周期" width="200">
          <template slot-scope="scope">
            <div>{{ scope.row.startDate }} - {{ scope.row.endDate }}</div>
          </template>
        </el-table-column>
        <el-table-column label="用料总量">
          <template slot-scope="scope">
            <div>{{ scope.row.total }} {{ scope.row.unit }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
        <el-table-column prop="userName" label="推送人"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="170">
          <template slot-scope="scope">
            <div>{{ scope.row.updateTime | formatDate }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :pageData="pageData" @pageNum="changPageNum" @pageSize="onChangePageSize"></Pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "./Pagination";
import HttpInterface from "../../util/httpInterface";
import Constants from "../../util/constants"

export default {
  name: "MaterialPlan",
  components: {
    Pagination
  },
  data() {
    return {
      loading: false,
      tableHeight: 0,
      name: "",
      materialPlanList: [],
      remindUser: [],
      dateRange: "",
      pageData: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      }
    };
  },

  created() {
    let _this = this;
    this.getTableHeight();
    this.getUserList(function () {
      _this.getDutyuserList(1);
    });
  },

  mounted() {
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },

  beforeRouteLeave(to, from, next) {
    window.onresize = null;
    next();
  },

  methods: {
    getTableHeight() {
      let tableH = 220;
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },

    handleEdit(id) {
      this.$emit("editPlan", id);
    },

    handleDelete(id) {
      this.$emit("delPlan", id);
    },

    // 计划详情信息
    onPlanDetails(id) {
      this.$emit('planDetails', id);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    refresh: function() {
      this.getDutyuserList();
    },

    changPageNum: function(d) {
      this.pageData.pageNum = Number(d);
      this.getDutyuserList();
    },

    onChangePageSize: function(d) {
      this.pageData.pageSize = Number(d);
      this.getDutyuserList();
    },

    searchPlan: function() {
      this.getDutyuserList();
    },

    getUserList(callback) {
			var _this = this;
			HttpInterface.requestGet(this, HttpInterface.URL_DUTYUSER_GET_ALL, {}, function (response) {
				var data = response.data;
				data.forEach((item, index) => {
					_this.remindUser.push({
						id: item.userid,
						name: item.fullname
					})
				});
				callback && callback();
			}, null)
		},

    // 获取人员列表
    getDutyuserList() {
      this.loading = true;
      var _this = this;
      var params = {
        pageSize: this.pageData.pageSize,
        pageNum: this.pageData.pageNum
      };
      var name = this.name;
      if (name != "") {
        params["name"] = name;
      }
      var dateRange = this.dateRange;
      if (dateRange != "" && dateRange != null) {
        params["startDate"] = dateRange[0];
        params["endDate"] = dateRange[1];
      }
      HttpInterface.requestPost(this, HttpInterface.URL_MATERIAL_LIST, params, function(response) {
        var data = response.data;
        var content = data.data;
        if (data.code == "0000") {
          var remindUser = _this.remindUser;
          content.forEach((item) => {
            remindUser.forEach((ele, index) => {
              if (item.userId == ele.id) {
                item.userName = ele.name;
              }
            });
            item.unit = Constants.PLAN_UNIT[item.unit];
            item.deviceName = Constants.DEVICE_NAME[item.deviceId];
            item.startDate = item.startDate.replace(/\-/g, ".");
            item.endDate = item.endDate.replace(/\-/g, ".");
          })
          _this.materialPlanList = content;
          _this.pageData = {
            total: data.total,
            pageNum: Number(data.pageNum),
            pageSize: Number(data.pageSize)
          }
          _this.loading = false;
        }
      }, null, true);
    }
  }
};
</script>

<style  scoped>
.condition_query {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.txt {
  margin-right: 10px;
  font-size: 14px;
}

.inline-input {
  width: 150px;
  margin-right: 22px;
}

/* 图片 */
.user_image{
  width: 30px;
  height: 30px;
  background: rgb(245, 245, 245);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  box-shadow: 0 2px 4px #cfcfcf;
}

.el-icon-picture-outline{
  font-size: 16px;
  margin-top: 4px;
}

.el-table >>> td,
.el-table >>> th {
  padding: 6px 0;
}
</style>
